<template>
  <div>
    <div class="title">
      浏览历史
    </div>
    <div class="list">
      <GoodsItem v-for="(item, index) in filterGoods"
                 :key="index"
                 :goodsInfo="item"
                 style="width:calc(33% - 10px);" />
      <Nothing v-if="goods.length == 0" />
    </div>
    <div>
      <Page :current="nowPage"
            :total="allCount"
            simple
            @on-change="changePage" />
    </div>
  </div>
</template>

<script>
import GoodsItem from 'components/common/goodsItem/GoodsItem.vue'
import { getHistory } from 'server/front_k.js'

export default {
  components: {
    GoodsItem
  },
  data() {
    return {
      goods: [],
      nowPage: 1,
      allCount: 0
    }
  },
  created() {
    getHistory().then(res => {
      this.goods = res.data
      this.allCount = Math.ceil(res.data.length / 3) * 10
    })
  },
  computed: {
    filterGoods() {
      let arr = this.goods.filter((v,i)=>{
        if (i >=(this.nowPage-1)*3 &&  i <= (this.nowPage)*3-1) {
          return v
        }
      })

      
      return arr
    }
  },
  methods: {
    changePage(i) {
      this.nowPage = i

    }
  }
}
</script>

<style scoped>
.list {
  padding: 20px;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.title {
  padding: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(222, 224, 225);
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
</style>
